<template>
  <!-- <a-spin tip="正在请求..." class="zhezhao1" :spinning="load"> -->
  <div class="div-box1">
    <div class="div-box">
      <div class="div-box-left">
        <!-- :class="highlight_id == item.id ? 'highlight1' : ''" -->
        <div
          class="div-boxleft-li"
          v-for="(item, index) in imgurlArr"
          :key="index"
          @click="handleView(item)"
          :class="currentObj.id == item.id ? 'boxleft-current' : ''"
        >
          {{ item.title }}
          <!-- <span> #{{ item.fileSize }}</span> -->
          <span> #{{ 99 }}</span>
        </div>
      </div>
      <div class="div-box-right">
        <!-- 工具 -->
        <div class="div-boxright-butbox">
          <div
            class="butbox-li"
            :class="highlight == index ? 'highlight' : ''"
            v-for="(item, index) in tool"
            :key="index"
            @click="handleShadow(item.type, index)"
          >
            <div class="butbox-img">
              <img :src="item.url" width="25" />
            </div>
            <div class="butbox-text">{{ item.text }}</div>
          </div>
        </div>
        <!-- 图像 -->
        <div class="dcmviewBox" style="">
          <div class="dcmview" style="height: 100%">
            <div class="dcmview-top">
              <div>{{ currentObj.manufacturer }}</div>
              <div v-show="currentObj.studyId">
                EX：{{ currentObj.studyId }}
              </div>
              <div v-show="currentObj.imagesInAcquisition">
                Se：{{ currentObj.imagesInAcquisition }}
              </div>
              <div v-show="currentObj.fileSize">
                Lm：{{ currentIndex }} /
                {{ currentObj.fileSize }}
              </div>
            </div>
            <div class="dcmview-right">
              <div>{{ currentObj.institutionName }}</div>
              <div>
                {{ currentObj.patientSex }}
                {{ currentObj.patientAge }}
              </div>
              <div>{{ currentObj.seriesDescription }}</div>
              <div>{{ currentObj.accessionNumber }}</div>
            </div>
            <!-- <div class="dcmview-bottom">
							<div>{{ currentObj.hospital }}</div>
							<div>{{ currentObj.name }}</div>
							<div>{{ currentObj.Ex }}</div>
							<div>{{ currentObj.lm }}</div>
						</div> -->
            <div class="dcmview-left">
              <div v-show="currentObj.kv">KV：{{ currentObj.kv }}</div>
              <div>{{ currentObj.seriesDate }}</div>
            </div>
            <dcmview
              @byValue="hanldeByValue"
              ref="dcmview"
              :currentDcm="currentDcm"
              :toolType="toolType"
            >
            </dcmview>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </a-spin> -->
</template>
<script>
//引入组件
// import { mapMutations, mapState } from "vuex";
// import { getCtInfoPath } from "api/index.js";
import dcmview from "@/components/yuanzhen-dcmView/dcmview.vue";
// import { screenage, apiUrl } from "@/config/setting.js";

export default {
  //注册组件
  components: {
    dcmview,
  },
  data() {
    return {
      // load: false,
      imgurlArr: [
        {
          title: "系列一",
          name: "孙交勇",
          hospital: "金堂仁爱医院",
          Basds: "Basds",
          Ex: "P000370691",
          se: 1,
          lm: 6,
          id: 11,
          imgArr: [
            {
              lm: 1,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
              accessionNumber: "row.accessionNumber",
              institutionName: "row.institutionName",
              kv: "row.kv",
              manufacturer: "row.manufacturer",
              patientAge: "row.patientAge",
              patientSex: "row.patientSex",
              studyId: "row.studyId",
            },
          ],
        },
        {
          title: "系列二",
          name: "孙交勇2",
          hospital: "金堂仁爱医院",
          lm: 6,
          id: 22,
          imgArr: [
            {
              lm: 1,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
            },
            {
              lm: 2,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
            },
            {
              lm: 3,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
            },
            {
              lm: 4,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
            },
            {
              lm: 5,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
            },
            {
              lm: 6,
              url: "http://124.164.172.125:50020/carbasics2023/h5/dicom/1803679928630251520/2024/6/20/CT.1.2.392.200036.9116.2.5.1.37.2420784501.1718862591.264686.dcm",
            },
          ],
        },
      ],
      imgurl: "", //传值，传dcm图片地址给<dcmview>组件
      toolType: "ScrollTool", //工具传值，根据传值绑定不同工具
      currentDcm: [],
      currentObj: {},
      i: 0,
      currentIndex: 1,
      tool: [
        {
          text: "翻图",
          url: require("@/assets/images/xz.png"),
          type: "ScrollTool",
        },
        // {
        // 	text: '清空',
        // 	url: require('@/assets/images/xz.png'),
        // 	type: 'eliminate',
        // },
        {
          text: "阴影",
          url: require("@/assets/images/阴影.png"),
          type: "Wwwc",
        },
        {
          text: "角度标记",
          url: require("@/assets/images/icon-design-34.png"),
          type: "Angle",
        },
        {
          text: "矩形标记",
          url: require("@/assets/images/矩形标记.png"),
          type: "RectangleRoi",
        },
        {
          text: "拖动探针",
          url: require("@/assets/images/探针.png"),
          type: "DragProbe",
        },
        {
          text: "长度测量",
          url: require("@/assets/images/长度测量直尺.png"),
          type: "Length",
        },
      ],
      highlight_id: "",
      highlight: 0,
    };
  },

  computed: {
    // ...mapState("storm", ["spinning", "showNav"]),
    // ...mapState("patient", ["patientData", "timerData", "overviewType"]),
  },
  created() {
    this.toolType = "Wwwc";
    // this.goCreate();
    this.handleView(this.imgurlArr[0]);
    console.log(11111111111);
  },
  methods: {
    //创建患者
    // async goCreate() {
    //   try {
    //     this.load = true;
    //     const { firstAidId } = this.patientData;
    //     const res = await getCtInfoPath(firstAidId);
    //     const { data, code, msg } = res;
    //     console.log("data: ", data);
    //     if (code === 200) {
    //       this.load = false;
    //       data.forEach((item, index) => {
    //         item.title = "系列" + (index + 1);
    //         item.fileDtoList.forEach((row) => {
    //           item.accessionNumber = row.accessionNumber;
    //           item.institutionName = row.institutionName;
    //           item.kv = row.kv;
    //           item.manufacturer = row.manufacturer;
    //           item.patientAge = row.patientAge;
    //           item.patientSex = row.patientSex;
    //           item.studyId = row.studyId;
    //           row.dcmPath = apiUrl + row.dcmPath;
    //         });
    //       });
    //       //  默认展示第一个患者
    //       if (data.length) {
    //         this.currentObj = data[0]; // 患者信息
    //         this.currentDcm = data[0].fileDtoList; // 影像数组
    //         this.highlight_id = data[0].id;
    //       }

    //       this.imgurlArr = data;
    //     }
    //   } catch (err) {
    //     this.load = false;
    //     console.log("err: ", err);
    //   }
    // },
    //获
    // 获取当前展示的是第几张 - 子组件传值
    hanldeByValue(_index) {
      this.currentIndex = _index + 1;
    },
    // 更换docom图像
    handleView(_item) {
      this.currentObj = _item.imgArr[0];
      this.currentDcm = _item.imgArr;
      this.$refs.dcmview.viewDcm();
      console.log("this.imgurl", this.imgurl);
    },
    // 工具
    handleShadow(_type, _index) {
      this.toolType = _type;
      this.highlight = _index;
      console.log("this.highlight ", this.highlight);
    },
  },
};
</script>

<style scoped>
.highlight {
  background: #4f8bff;
  /* // border-radius: 10px; */
}

.div-box-right {
  flex: 1;
  background: #000;
  border-radius: 0 0 6px 6px;
}

.dcmviewBox {
  background: #000;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  height: calc(100% - 80px);
}
.dcmview {
  position: relative;
  color: pink;
  text-align: left;
}
.dcmview-top {
  position: absolute;
  top: 10px;
  left: 10px;
}
.dcmview-right {
  position: absolute;
  top: 10px;
  right: 10px;
}
.dcmview-left {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.dcmview-bottom {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.div-box {
  display: flex;
  height: 100%;
}
.div-box1 {
  height: 100%;
  width: 100%;
  background: #282828;
  padding: 10px;
  border-radius: 10px;
}
.div-box-left {
  flex-shrink: 0;
  width: 200px;
  background: #282828;
  color: #fff;
  padding: 0 10px 0 0;
  height: 100%;
}
.div-box-left div {
  line-height: 25px;
  border-radius: 4px;
}

.div-boxright-butbox {
  display: flex;
  background: #282828;
  padding: 0 10px 10px 0px;
  height: 72px;
  box-sizing: border-box;
}

.butbox-li {
  width: 80px;
  display: flex;
  justify-content: center;
  color: #fff;
  flex-wrap: wrap;
  font-size: 14px;
  padding-bottom: 5px;
  border-radius: 4px;
}
.butbox-li div {
  width: 100%;
  text-align: center;
}
.butbox-img {
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div-boxleft-li {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}
.boxleft-current {
  background: #4f8bff;
}
.highlight1 {
  background: #555555;
  border-radius: 5px;
}
</style>
<style>
/* .zhezhao1 {
	width: 100%;
	height: 100% !important;
	box-sizing: border-box;
	padding-bottom: 20px;
} */
</style>
